<template>
  <div style="height: 100%">
    <workflow :data="list" @click-node="clickNode"></workflow>
    <drawerInitiator ref="drawerInitiatorRef" @change="change" @confirm="confirm"></drawerInitiator>
    <DrawerApprover ref="drawerApproverRef" @change="change" @confirm="confirm"></DrawerApprover>
    <drawerCondition ref="drawerConditionRef" @change="change" @confirm="confirm"></drawerCondition>
  </div>
</template>
<script setup>
import drawerInitiator from '@/components/Workflow/drawerInitiator.vue';
import drawerCondition from '@/components/Workflow/drawerCondition.vue';
import DrawerApprover from '@/components/Workflow/drawerApprover.vue';
import workflow from '@/components/Workflow/workflow.vue';
import { ref } from 'vue';

const drawerInitiatorRef = ref(null);
const drawerApproverRef = ref(null);
const drawerConditionRef = ref(null);
const list = ref([]);
const currentVal = ref(null);
const currentList = ref([]);

function clickNode(val, i, list) {
  currentVal.value = val;
  currentList.value = list;
  if (val.type === 'start') {
    //发起人
    drawerInitiatorRef.value.openDrawer();
  } else if (val.type === 'ccTo') {
    //抄送人
    console.log('ccTo');
  } else if (val.type === 'approver') {
    //审批人
    drawerApproverRef.value.openDrawer(val.data);
  } else if (val.type === 'condition') {
    //条件分支
    drawerConditionRef.value.openDrawer(val.data);
  }
}

function change(val) {
  // console.log(val);
}

function confirm(val) {
  if (val.value) {
    let arr = [];
    val.value.forEach(item => {
      arr.push(item.label);
    });
    currentVal.value.content = arr.join('，');
  }

  // 最后一个条件设置为“其他条件进入此流程”，并且去掉placeholder
  if (currentVal.value.type === 'condition' && currentVal.value.last && currentVal.value.content === '') {
    currentVal.value.content = '其他条件进入此流程';
    currentVal.value.placeholder = '';
  }

  currentVal.value.data = val;
  console.log(currentVal.value);
}
</script>
<style scoped lang="scss"></style>
